<template>
    <uni-popup ref="popup" type="bottom" @change="(val:any)=>emits('change',val)">
        <view class="m-popup-panel">
            <uni-title v-if="title" type="h2" :title="title" align="center"></uni-title>
            <slot></slot>
            <uni-icons
                class="m-popup-panel-close"
                v-if="closed"
                type="close"
                size="24"
                @click="closePannel"
            ></uni-icons>
        </view>
        <view class="m-popup-pannel-helper"></view>
    </uni-popup>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const props = defineProps({
    title: String,
    bottom: { type: String, default: '0rpx' },
    closed: { type: Boolean, default: true }
})
const popup = ref<any>(null)
function closePannel() {
    popup.value.close()
}
defineExpose({
    close: closePannel,
    open: () => popup.value.open()
})
const emits = defineEmits(['change'])
</script>

<style lang="scss" scoped>
.m-popup-panel {
    padding: $uni-spacing-col-lg;
    position: relative;
    background-color: $uni-bg-color;
    border-top-right-radius: $uni-border-radius-lg;
    border-top-left-radius: $uni-border-radius-lg;
}
.m-popup-panel-close {
    position: absolute;
    right: calc($uni-spacing-col-lg + 16rpx);
    top: calc($uni-spacing-col-lg + 16rpx);
}
.m-popup-pannel-helper {
    height: calc(var(--window-bottom) + v-bind(bottom));
}
</style>
